<template>
  <div class="container" @touchstart="refreshStart" @touchmove="refreshMove" @touchend="refreshEnd">
    <div class="refreshBox" :style="isTranform">
      <div class="refresh" :style="isZoom" :class="isEnd==2?'animationSmall':''">
        <div class="refreshWord" v-if="isEnd == 0">松开刷新</div>
        <div class="refreshCirle animation" v-if="isEnd == 1"></div>
        <image class="iconYes" v-if="isEnd==2" />
      </div>
    </div>
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: "refresh",
  props: {
    isTop: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      isTranf: 0,
      touchStart: "",
      touchMove: "",
      isEnd: 0
    };
  },

  methods: {
    refreshStart(e) {
      if (this.isEnd == 0 && this.isTop == 1) {
        this.touchStart = e.changedTouches[0].pageY;
      }
    },
    refreshMove(e) {
      if (this.isEnd == 0 && this.isTop == 1) {
        var touchStart = this.touchStart,
          oldMove = this.touchMove,
          newMove = e.changedTouches[0].pageY;
        if (touchStart <= newMove) {
          var isTranf = touchStart > newMove ? 0 : newMove - touchStart;
          this.isTranf = isTranf;
          this.touchMove = e.changedTouches[0].pageY;
        }
      } else {
        this.isTranf = 0;
        this.isEnd = 0;
        this.touchStart = 9999;
      }
    },
    refreshEnd(e) {
      var that = this;
      if (this.isEnd == 0 && this.isTop == 1) {
        if (this.isTranf >= 150) {
          this.isEnd = 1;
          this.$emit("refresh");
        } else {
          this.isTranf = 0;
        }
      }
    },
    endAfter() {
      this.isEnd = 2;
      setTimeout(() => {
        this.isTranf = 0;
        this.isEnd = 0;
      }, 600);
    }
  },
  computed: {
    isTranform() {
      var isTranf = this.isTranf > 150 ? 150 : this.isTranf;
      var isTemp = `transform: translateY(${isTranf - 100}px);`;
      return isTemp;
    },
    isZoom() {
      var isTranf = this.isTranf > 125 ? 125 : this.isTranf;
      var isTemp = `zoom:${isTranf / 125};`;
      return isTemp;
    }
  }
};
</script>

<style lang="css" scoped>
.container {
  min-height: 100vh;
}
.refreshBox {
  margin: 0 auto;
  width: 100%;
  height: 100upx;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: 300upx;
  position: fixed;
  z-index: 99999;
  top: 0;
  left: 0;
  transform: translateY(-100upx);
}

.animationSmall {
  animation: small 1.1s both;
}

@keyframes small {
  0% {
    transform: scale(1);
  }
  20% {
    transform: scale(1.4);
  }
  100% {
    transform: scale(0);
  }
}
.refreshWord {
  width: 150upx;
  height: 26upx;
  font-size: 24upx;
  line-height: 26upx;
  text-align: center;
  border-radius: 26upx;
}

.refresh {
  min-width: 50upx;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50upx;
  background: #ffffff;
  box-shadow: 0 0 16upx 0 rgba(0, 0, 0, 0.1);
  border-radius: 50upx;
}

.refreshCirle {
  width: 26upx;
  height: 26upx;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  border: 6upx solid black;
  border-bottom-color: transparent;
  border-top-color: transparent;
}

.animation {
  animation: rotate 1.1s infinite;
  animation-timing-function: cubic-bezier(0.3, 1.65, 0.7, -0.65);
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.true {
  color: black;
}

.iconYes {
  width: 34upx;
  height: 34upx;
  content: url("");
}
</style>
